import React from 'react'
import {Card, Row, Col, Modal, Switch, Avatar, Icon, Skeleton} from 'antd'

export default class Gallery extends React.Component {

  state = {
    visible: false,
    loading: true,
  }


  onChange = checked => {
    this.setState({loading: !checked});
  };

  openGallery = (imgSrc) => {
    this.setState({
      visible: true,
      currentImg: '/gallery/' + imgSrc
    })
  }

  render() {
    const imgs = [
      ['1.png', '2.png', '3.png', '4.png', '5.png'],
      ['6.png', '7.png', '8.png', '9.png', '10.png'],
      ['11.png', '12.png', '13.png', '14.png', '15.png'],
      ['16.png', '17.png', '18.png', '19.png', '20.png'],
      ['21.png', '22.png', '23.png', '24.png', '25.png']
    ]
    const imgList = imgs.map((list) => list.map((item) =>
      // {/*<Card style={{marginBottom:10}} cover={<img src={'/gallery/'+item} onClick={this.openGallery.bind(this,item)}/>}>*/}
      <Card style={{marginBottom: 10}}
            cover={<img src={'/gallery/' + item} onClick={() => this.openGallery(item)}/>}>
        <Card.Meta title="React Admin" description={item} key={item}/>
      </Card>
    ))
    const {loading} = this.state;
    return (
      <>

        {/* <Card style={{marginTop: 10}}>

          <Switch checked={!loading} onChange={this.onChange}/>
          <Card style={{width: 300, marginTop: 16}} loading={loading}>
            <Card.Meta
              avatar={
                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
              }
              title="Card title"
              description="This is the description"
            />
          </Card>

          <Card
            style={{width: 300, marginTop: 16}}
            actions={[
              <Icon type="setting" key="setting"/>,
              <Icon type="edit" key="edit"/>,
              <Icon type="ellipsis" key="ellipsis"/>,
            ]}
          >
            <Skeleton loading={loading} avatar active>
              <Card.Meta
                avatar={
                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
                }
                title="Card title"
                description="This is the description"
              />
            </Skeleton>
          </Card>


        </Card>
        */}
        <Card title="图片画廊" style={{marginTop: 10}}>
          <div className="card-wrap">
            <Row gutter={8}>
              {[0, 1, 2, 3, 4].map(item => <Col md={item == 4 ? 4 : 5}> {imgList[item]} </Col>)}
            </Row>

            <Modal
              width={600}
              height={""}
              visible={this.state.visible}
              title="图片画廊"
              onCancel={() => {
                this.setState({visible: false})
              }}
              footer={null}
            >
              {<img src={this.state.currentImg} alt="" style={{width: '100%'}}/>}
            </Modal>
          </div>

        </Card>

      </>
    );
  }
}


// Card#
// 参数	                 说明	类型	默认值	版本
// actions	            卡片操作组，位置在卡片底部	Array<ReactNode>	-
// activeTabKey	        当前激活页签的 key	string	-	3.3.0
// headStyle	        自定义标题区域样式	object	-	3.8.0
// bodyStyle	        内容区域自定义样式	object	-
// bordered	            是否有边框	boolean	true
// cover	            卡片封面	ReactNode	-
// defaultActiveTabKey	初始化选中页签的 key，如果没有设置 activeTabKey	string	第一个页签	3.3.0
// extra	            卡片右上角的操作区域	string|ReactNode	-
// hoverable	        鼠标移过时可浮起	boolean	false
// loading	            当卡片内容还在加载中时，可以用 loading 展示一个占位	boolean	false
// tabList	            页签标题列表	Array<{key: string, tab: ReactNode}>	-
// size	                card 的尺寸	default | small	default	3.12.0
// title	            卡片标题	string|ReactNode	-
// type	                卡片类型，可设置为 inner 或 不设置	string	-
// onTabChange	        页签切换的回调	(key) => void	-


// Card.Grid#
// 参数	                说明	类型	默认值	版本
// className	        网格容器类名	string	-
// style	            定义网格容器类名的样式	object	-


// Card.Meta#
// 参数	                说明	类型	默认值	版本
// avatar	            头像/图标	ReactNode	-
// className	        容器类名	string	-
// description	        描述内容	ReactNode	-
// style	            定义容器类名的样式	object	-
// title	            标题内容
